import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:richedit/convert/convert.dart';
import 'package:richedit/data/divider_entity.dart';

class DividerEdit extends StatefulWidget {
  DividerEntity data;

  DividerEdit(this.data);

  @override
  _DividerEditState createState() => _DividerEditState();
}

class _DividerEditState extends State<DividerEdit> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10),
      child: Container(
        height: widget.data.height == null ? 1 : widget.data.height!.toDouble(),
        color: widget.data.color == null
            ? Colors.black54
            : Convert.parseColor(widget.data.color!),
      ),
    );
  }
}

class DividerPreview extends StatefulWidget {
  DividerEntity data;

  DividerPreview(this.data);

  @override
  _DividerPreviewState createState() => _DividerPreviewState();
}

class _DividerPreviewState extends State<DividerPreview> {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: widget.data.height == null ? 1 : widget.data.height!.toDouble(),
        color: widget.data.color == null
            ? Colors.black54
            : Convert.parseColor(widget.data.color!));
  }
}

class DividerSetting extends StatefulWidget {
  DividerEntity data;
  ValueChanged onChanged;
  DividerSetting(this.data, this.onChanged);
  @override
  _DividerSettingState createState() => _DividerSettingState();
}

class _DividerSettingState extends State<DividerSetting> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8), topRight: Radius.circular(8)),
        color: Colors.white,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Text("颜色：", style: TextStyle(fontSize: 16),),
              colorWidget(Colors.black87),
              colorWidget(Colors.red),
              colorWidget(Colors.grey),
              colorWidget(Colors.blue),
              colorWidget(Colors.orange),
              colorWidget(Colors.purple),
            ],
          ),
          Row(
            children: [
              Text("高度：", style: TextStyle(fontSize: 16),),
              heightWidget(1),
              heightWidget(3),
              heightWidget(8),
            ],
          )
        ],
      ),
    );
  }
  Widget colorWidget(Color color){
    return GestureDetector(
      onTap: (){
        widget.data.color = Convert.color2String(color);
        setState(() {
          widget.onChanged(widget.data);
        });
      },
      child: Container(
        width: 36,
        height: 36,
        margin: const EdgeInsets.all(5),
        decoration: BoxDecoration(
          color: color,
          border: Border.all(color: Colors.blue, width: Convert.parseColor(widget.data.color).value == color.value ? 2 : 0),
        ),
      ),
    );
  }
  Widget heightWidget(int height){
    return GestureDetector(
      onTap: (){
        widget.data.height = height;
        setState(() {
          widget.onChanged(widget.data);
        });
      },
      child: Container(
        width: 36,
        height: 36,
        margin: const EdgeInsets.all(5),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.blue, width: widget.data.height == height ? 2 : 0),
        ),
        child: Center(
          child: Container(
            height: height.toDouble(),
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

Future<DividerEntity?> showDividerSetting(BuildContext context, DividerEntity data, ValueChanged onChanged){
  // if (data.height == null){
  //   data.height = 1;
  // }
  return showModalBottomSheet(context: context,
      backgroundColor: Colors.transparent,
      builder: (context) {
        return DividerSetting(data, onChanged);
      });
}
